import React, { useEffect, useState } from 'react';
import { TjContent } from '@/tjComponents';
import { Button, message, Modal } from 'antd';
import TjTable from '@/pages/ETrade/components/TjTable';
import _ from 'lodash';
import { HttpCode } from '#/utils/contacts.js';
import { getColumns } from './helper';
import { createFiletype, fetchFiletype, updateFiletype, deleteFiletype } from '../service';
import ApplyModal from './ApplyModal';
import type { IApplyType } from '../type';
import type { ProvinceType } from '@/hooks/useRequestPowerAfterInit';
import './index.less';

const { confirm } = Modal;

const DeptDrewerContent: React.FC<IDeptDrewerContentProps> = (props) => {
  const [tableList, setTableList] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    getData();
  }, []);

  const add = async () => {
    const result: any = await ApplyModal.show({
      operationType: '1',
      marketList: props.marketList,
      onOk: async (val: IApplyType) => {
        const params = {
          value: val.description,
          description: val.description,
          explain: val.explain,
        };
        const res: any = await createFiletype(params);
        if (res && res.statusCode === HttpCode.SUCCESS) {
          message.success('保存成功');
        } else {
          message.error(res?.message || '操作失败');
        }
        return res;
      },
    });
    if (result && result.index === 1 && result.statusCode === HttpCode.SUCCESS) {
      getData();
    }
  };

  const getData = () => {
    setLoading(true);
    try {
      fetchFiletype().then((res: any) => {
        if (res && res.statusCode === HttpCode.SUCCESS) {
          setTableList(res.data);
        }
        setLoading(false);
      });
    } catch {
      setLoading(false);
    }
  };

  const edit = async (row: any) => {
    const result: any = await ApplyModal.show({
      operationType: '2',
      marketList: props.marketList,
      data: {
        ...row,
        visible: 1,
      },
      onOk: async (val: IApplyType) => {
        const res: any = await updateFiletype({ ...row, ...val, value: val.description });
        if (res && res.statusCode === HttpCode.SUCCESS) {
          message.success('保存成功');
          getData();
        } else {
          message.error(res?.message || '操作失败');
        }
        return res;
      },
    });
    if (result && result.index === 1 && result.statusCode === HttpCode.SUCCESS) {
      getData();
    }
  };

  const del = (row: any) => {
    confirm({
      title: '确定删除此行数据吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        setLoading(true);
        deleteFiletype(row.id)
          .then((res: any) => {
            if (res && res.statusCode === HttpCode.SUCCESS) {
              message.success('删除成功');
            } else {
              message.error(res.message);
            }
            getData();
          })
          .catch(() => {
            setLoading(false);
          });
      },
    });
  };

  return (
    <div className="drawer-content-dept">
      <TjContent
        className="content"
        titleLeft={''}
        titleRight={
          <>
            <Button type="primary" style={{ width: '98px' }} onClick={add}>
              新增
            </Button>
          </>
        }
      >
        <div className="table-box">
          <TjTable
            columns={getColumns({
              edit,
              del,
            })}
            dataSource={tableList}
            isLoading={loading}
          />
        </div>
      </TjContent>
    </div>
  );
};

interface IDeptDrewerContentProps {
  marketList: ProvinceType[];
}

export default DeptDrewerContent;
